<template>
  <div class="swiperTop">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in swpierPhoto.images" :key="image">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
// 导入home请求组件
import { getBanner } from '@/api/home.js'
import { reactive, onMounted } from 'vue'
export default {
  setup() {
    // 轮播图图片数据
    const swpierPhoto = reactive({ images: [] })
    // 在onMounted函数发请求获取轮播图图片
    onMounted(async () => {
      const { data: res } = await getBanner()
      if (res.code !== 200) {
        Toast.fail('获取轮播图失败')
      }
      // 请求回来的轮播图数据赋值给swpierPhoto.images，渲染轮播图图片
      swpierPhoto.images = res.banners
    })

    return { swpierPhoto }
  }
}
</script>

<style lang="less" scoped>
.swiperTop {
  .van-swipe {
    width: 100%;
    height: 3rem;
    .van-swipe-item {
      overflow: hidden;
      padding: 0 0.2rem;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
    }
  }
  /deep/.van-swipe__indicator--active {
    background-color: rgb(219, 130, 130);
  }
}
</style>